<template>
    <div>
    <div class="demo-image">
            <div v-for="(item,index) in list" :key="index" class="block">
            
            <el-image style="width: 250px; height: 250px" :src="item.img" :fit="cover" />
            <span class="demonstration hidden">{{ item.name }}</span>
            <el-row>
                <el-col :span="10" class="demonstration">*{{ item.price }}g</el-col>
                <el-col :span="4"  class="demonstration"><el-icon @click="routeClick(item.id)"><View /></el-icon></el-col>
                <el-col :span="4"  class="demonstration"><el-icon @click="addCart(item.id)"><ShoppingCart /></el-icon></el-col>
                <el-col :span="4"  class="demonstration"><el-icon><Goods /></el-icon></el-col>
                <el-col :span="2"><el-icon></el-icon></el-col>
            </el-row>
        </div>
    </div>
    </div>
</template>

<script>

import { View,ShoppingCart,Goods } from '@element-plus/icons-vue';
import { useGoodStore } from '@/store/goods';
import { ElMessageBox } from 'element-plus';

export default{
    props:['list'],
    components:{
        Goods,
        ShoppingCart,
        View
    },
    methods:{
      routeClick(val){
        this.data=this.list.find(v=>v.id==val)
        this.$router.push({path:'/detail',query:this.data})
      },
      addCart(val){



        this.data=this.list.find(v=>v.id==val)
        this.store.cartAdd({
            id:val,
            price:this.data.price,
            name:this.data.name,
            onlineprice:this.data.onlineprice,
            num:1,
            total:this.data.onlineprice       
          })//调用store中的方法
          ElMessageBox.alert('小主，小宠已加入，感谢领养', '好好爱它', {
            // if you want to disable its autofocus
            // autofocus: false,
            confirmButtonText: 'OK',
           
  })
      }
    },
    data(){
      return{
        data:[],
        store:useGoodStore()
      }
    }
    
}
</script>

<style scoped>
.demo-image .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
  vertical-align: top;
}
.demo-image .block:last-child {
  border-right: none;
}
.demo-image .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.hidden{
  width: 200px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin: auto;
}
</style>